{extend name="public/layout" /}
{block name="head_css"}
    <link rel="stylesheet" href="/static/index/css/header.css?v={$version}">
    <style>
        .comment-box {
            box-sizing: border-box;
            padding-top: 10px;
            font-size: .9rem;
            background-color: #fff;
        }

        .comment-box .item-line {
            width: 100%;
            padding: 5px 0;
            border-bottom: #ececec solid 1px;
            font-size: 0;
        }

        .comment-box .item-line .title,.comment-box .item-line .more {
            width: 50%;
            display: inline-block;
            vertical-align: middle;
        }

        .comment-box .item-line .title {
            font-size: .95rem;
            color: #333;
        }

        .comment-box .item-line .more {
            font-size: .95rem;
            text-align: right;
        }

        .comment-box .item-line .more>a,.comment-box .item-line .more>a:link,.comment-box .item-line .more>a:visited {
            color: #ff7200;
            text-decoration: none;
        }

        .comment-box .item-line .tel {
            font-size: .9rem;
            color: #bbb;
        }

        .comment-box .item-line .comment-item {
            font-size: 0;
            margin-top: .5rem;
        }

        .comment-box .item-line .comment-item .citem {
            display: inline-block;
            vertical-align: middle;
            font-size: .9rem;
            color: #666;
            margin-right: 1%;
            border: #bbb solid 1px;
            box-sizing: border-box;
            padding: .1rem .2rem;
        }
        /** 加载box **/
        .load-box {
            box-sizing: border-box;
            font-size: 0;
            overflow: hidden;
            padding-top: 10px;
            padding-bottom: 5px;
            text-align: center;
        }

        .load-box .licon,.load-box .ltips {
            display: inline-block;
            vertical-align: middle;
        }

        .load-box .licon {
            width: 6%;
            padding-top: 6%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url('/static/index/image/icon_loading.svg');
        }
        .load-box .ltips {
            font-size: .8rem;
            color: #ccc;
        }
        /** 加载box **/
    </style>
{/block}
{block name="main"}
    <div class="container sam-header">
        <div   class="back">
            <a href="{:url('detail',array('id'=>$id))}">
                <div class="arrow"></div>
            </a>
        </div>
        <div class="name">用户评论</div>
    </div>
    <div class="container comment-box">
        {foreach name="list" item="item"}
            <div class="item-line">
                <div class="tel">{$item.uid}</div>
                <div class="comment-item">
                    {foreach name="item.comment" item="comment"}
                        <div class="citem">{$comment}</div>
                    {/foreach}
                </div>
            </div>
        {/foreach}
    </div>
    {if condition="$comment_end eq 0"}
    <div class="load-box">
        <div class="licon"></div>
        <div class="ltips">正在加载列表</div>
    </div>
    {/if}
{/block}
{block name="footer"}
{/block}
{block name="script"}
    {if condition="$comment_end eq 0"}
    <script>
        var loadHeight = $('.load-box').height();
        var windowHeight = $(window).height();
        var scTop = 0;
        var ajaxLoading = false;
        var is_end = false;
        var page = 2;
        $(window).scroll(function(e) {
            if($(window).scrollTop() - scTop > 0 && ($(window).scrollTop() + windowHeight >= $(document).height() - loadHeight)&&!ajaxLoading) {
                if(ajaxLoading) return true;
                var d = new Object();
                d.page = page;
                d.id = {$id};
                $.ajax({
                    url: '{:url('get_comment_list')}',
                    method: 'post',
                    data:d,
                    dataType: 'json',
                    beforeSend: function() {
                        ajaxLoading = true;
                    },
                    success: function (res) {
                        setTimeout(function () {
                            page = res.data.page;
                            if(res.data.is_end == 1){
                                is_end = true;
                                $('.load-box').each(function(){
                                    $(this).remove();
                                });
                            }
                            $('.comment-box').append(res.data.content);
                            ajaxLoading = false;
                        },1000);
                    },
                    error: function (xhr,status,error) {
                        alert('网络错误');
                    },
                    complete: function () {
                        ajaxLoading = false;
                    }
                });
            }
            scTop = $(window).scrollTop();
        });
    </script>
    {/if}
{/block}